import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import App.Global 1.0

//圆形头像，登录文本,VIP区域
Item{
    Row{
        anchors.verticalCenter:parent.verticalCenter
        anchors.left: parent.left
        spacing:15
        //圆形头像
        Rectangle{
            id:userIcon
            width:25
            height:width
            radius:width/2
            color:"#2d2d37"
            Image{
                scale:0.15
                anchors.centerIn:parent
                source:"qrc:/res/topArea/defaultAvatar.png"
                MouseArea{
                    anchors.fill:parent
                    hoverEnabled:true
                    cursorShape: Qt.PointingHandCursor
                }
            }
        }
        //登录文本
        Text{
            id:loginText
            text:"未登录"
            width: 30
            anchors.verticalCenter:parent.verticalCenter
            color: "#75777f"
            font.pixelSize:14
            font.family:"微软雅黑 Light"
            MouseArea{
                anchors.fill:parent
                hoverEnabled:true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    loginText.color="#ffffff"
                }
                onExited: {
                    loginText.color="#75777f"
                }
                onClicked: {
                    GlobalState.openLoginPopup()
                }
            }
        }
        //会员标识
        Item{
            width: 50
            height: userIcon.height
            anchors.verticalCenter: parent.verticalCenter
            Rectangle{  //会员文本
                id:vipRect
                width: parent.width
                height: 12
                radius: height/2
                color: "#dadada"
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                Label{
                    text: "VIP开通"
                    color: "#f8f9f9"
                    anchors.left: parent.left
                    anchors.leftMargin: parent.radius*2+5
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: parent.height/2+2
                    font.family:"微软雅黑 Light"
                }
            }
            Rectangle{  //会员前面圆形
                width: 16
                height: width
                radius: width/2
                color: "#dadada"
                border.width: 1
                border.color: "#13131a"
                anchors.verticalCenter: parent.verticalCenter
            }
        }

        //下拉，免费，消息，设置，皮肤
        Image{
            id:dropDown
            width: 25
            height: 25
            anchors.verticalCenter: parent.verticalCenter
            source: "qrc:/res/topArea/dropDown.png"
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: dropDown
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    dropDown.layer.enabled=true
                }
                onExited: {
                    dropDown.layer.enabled=false
                }
            }
        }
        Image{
            id:freeSound
            width: 25
            height: 25
            anchors.verticalCenter: parent.verticalCenter
            source: "qrc:/res/topArea/free.png"
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: freeSound
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.PointingHandCursor
                onEntered: {
                    freeSound.layer.enabled=true
                }
                onExited: {
                    freeSound.layer.enabled=false
                }
            }
        }
        Image{
            id:message
            width: 25
            height: 25
            anchors.verticalCenter: parent.verticalCenter
            source: "qrc:/res/topArea/message.png"
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: message
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.PointingHandCursor
                onEntered: {
                    message.layer.enabled=true
                }
                onExited: {
                    message.layer.enabled=false
                }
            }
        }
        Image{
            id:settings
            width: 25
            height: 25
            anchors.verticalCenter: parent.verticalCenter
            source: "qrc:/res/topArea/setting.png"
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: settings
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.PointingHandCursor
                onEntered: {
                    settings.layer.enabled=true
                }
                onExited: {
                    settings.layer.enabled=false
                }
            }
        }
        Image{
            id:skins
            width: 25
            height: 25
            anchors.verticalCenter: parent.verticalCenter
            source: "qrc:/res/topArea/skin.png"
            layer.enabled: false
            layer.effect: ColorOverlay{
                source: skins
                color: GlobalState.uiHoverColor
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.PointingHandCursor
                onEntered: {
                    skins.layer.enabled=true
                }
                onExited: {
                    skins.layer.enabled=false
                }
            }
        }

    }
}

